<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <div class="container">
      <div class="upper column centered">
        <div class="left row between">
          <div class="title">请选择乘车人数</div>
          <md-icon name="guanbi" class="guanbi" @click="cancel"></md-icon>
        </div>
        <div class="right">
          <div class="subtitle">乘车人数包含儿童，否则司机可能取消订单，拼车费用根据最终拼车人数计算。</div>
        </div>
      </div>
      <div class="lower">
        <div class="number-selector row around">
          <div v-for="count in [1,2,3,4]" :key="count">
            <div
              :class="num==count?'number-selector-item-active':'number-selector-item'"
              @click="onChange(count)"
            >{{count}}人</div>
          </div>
        </div>
        <div class="pinche-box" v-if="pinFlag=='1'">
          <md-agree v-model="isPinche" class="check-box">是否愿意拼车</md-agree>
          <div class="desc">拼车成功后可享受优惠的价格，差额车费将在行程结束后原路返还（4人乘车不可拼车）</div>
        </div>
      </div>
      <div class="confirm-box">
        <md-button @click="confirm">确认{{num}}{{isPinche?'拼车':'独享'}}</md-button>
      </div>
    </div>
  </md-popup>
</template>

<script>
import { Popup, Icon, PopupTitleBar, Agree, Button } from 'mand-mobile';
import { mapGetters } from 'vuex';
export default {
  name: 'number-selector',
  components: {
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    [PopupTitleBar.name]: PopupTitleBar,
    [Agree.name]: Agree,
    [Button.name]: Button
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    },
    pinFlag: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      num: 1,
      isPinche: false
    };
  },
  methods: {
    confirm() {
      this.value = false;
      this.$emit('submit', {
        number: this.num,
        isPinche: this.isPinche
      });
    },
    cancel() {
      this.value = false;
      this.$emit('cancel');
    },
    onChange(count) {
      this.num = count;
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
    console.log(this.pinFlag);
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  }
};
</script>
<style lang="stylus" scoped>
#popup-container {
  .container {
    background-color: #fff;
    box-sizing: border-box;

    .upper {
      padding: 30px;

      .left {
        width: 100%;

        .title {
          font-size: 36px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 36px;
        }

        .guanbi {
          width: 24px;
          height: 24px;
        }
      }

      .subtitle {
        margin-top: 20px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 26px;
      }
    }

    .lower {
      .number-selector {
        box-sizing: border-box;
        padding: 30px;

        .number-selector-item {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          font-size: 30px;
          color: #666666;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .number-selector-item-active {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          border: 1px solid #FF6917;
          color: #FF6917;
          font-size: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .pinche-box {
        box-sizing: border-box;
        padding: 30px;

        .check-box {
          font-size: 30px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 30px;
          margin-bottom: 20px;
        }

        .desc {
          font-size: 26px;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 36px;
        }
      }
    }

    .confirm-box {
      box-sizing: border-box;
      padding: 20px;
    }
  }
}
</style>
